<template>
  <div class="outer">
    <headers @back-click="back()" :headers="headers"></headers>
    <scroll :topArea="44" ref="afterSale" @pullingDown="onpullingDown" @pullingUp="onpullingUp" :data="lst">
      <div class="detail-area" v-for="i in lst" :key="i.id">
        <div class="detail-head">
            <div>维权单号： {{i.serviceOrderNumber}}</div>
            <div>租赁日期： {{i.time}}</div>
        </div>
        <div class="detail-content">
            <div class="img-area">
                <img :src="i.image" alt="图片">
            </div>
            <div class="content-area">
                <div class="title">{{i.goodsName}}</div>
                <div class="price">价值： ￥{{(i.price/100).toFixed(2)}}</div>
                <div class="sku">
                    <div class="sku-item" v-for="c in i.standard" :key="c.id">{{c.name}}</div>
                </div>
            </div>
        </div>
        <div class="state-item" @click="goProcess(i)">
          <div class="status">{{i.stateStr}}</div>
          <div>{{i.stateDesc}}</div>
          <i></i>
        </div>
        <div class="operation-area" v-if="i.canCancel || i.cansend">
            <div @click="cancelRequest(i)" v-if="i.canCancel">取消订单</div>
            <div @click="goConfirmPage(i)" v-if="i.cansend">去发货</div>
        </div>
      </div> 
    </scroll>
  </div>
</template>

<script>
import {getServiceList,goCancelRequest} from "@/api/homepage.js"
export default {
  name: 'afterSale',
  data: function(){
    return {
      headers: {
        title: "维修申请列表"
      },
      pageNum: 1,
      pageSize: 10,
      hasMore: true,
      lst: [],
    }
  },
  components: {
  },
  methods: {
    back: function(){
      this.$router.go(-1);
    },
    onpullingDown: function(){
      this.serviceList();
    },
    onpullingUp: function(){
      if(this.hasMore){
        this.loadMore();
      }else {
        this.$refs.afterSale.forceUpdate();
        return
      }
    },
    serviceList: function(){
      this.pageNum = 1;
      getServiceList(this.pageNum).then( data => {
        let self = this;
        if(data.code == 200){
          if(data.data && data.data.list.length < this.pageSize){
            this.hasMore = false;
          }else {
            this.hasMore = true;
          }
          let tempData = data.data.list;
          tempData.forEach(function(item){
            let tempVal = new Date(item.createTime);
              item.time = tempVal.getFullYear() + '-' + (tempVal.getMonth()+1) + "-" + tempVal.getDate();
              item.image = self.imgUrlService + item.image;
              item.canCancel = item.stateStr == "待审核" ? true : false;
              if(item.category == "repair"){
                item.cansend = item.stateStr == "待发货" ? true : false;
                item.title = "维修信息";
                item.bottomMsg = "你的维修申请已通过，请将您要维修的商品邮寄到商家指定收获地点。";
              }else if(item.category == "exchange"){
                item.cansend = item.stateStr == "待换货" ? true : false;
                item.title = "换货信息";
                item.bottomMsg = "你的换货申请已通过，请将您要换货的商品邮寄到商家指定收获地点。";
              }else {
                item.cansend = item.stateStr == "待退货" ? true : false;
                item.title = "退货信息";
                item.bottomMsg = "你的退货申请已通过，请将您要退货的商品邮寄到商家指定收获地点。";
              }
          });
          this.lst = tempData;
        }else {
          this.hasMore = false;
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
          this.$refs.afterSale.forceUpdate();
        }
      })
    },
    loadMore: function(){
      let self = this;
      this.pageNum ++;
      getServiceList(this.pageNum).then( data => {
        if(data.code == 200){
          if(data.data && data.data.list.length < this.pageSize){
            this.hasMore = false;
          }else {
            this.hasMore = true;
          }
          let tempData = data.data.list;
          tempData.forEach(function(item){
            let tempVal = new Date(item.createTime);
              item.time = tempVal.getFullYear() + '-' + (tempVal.getMonth()+1) + "-" + tempVal.getDate();
              item.image = self.imgUrlService + item.image;
              item.canCancel = item.stateStr == "待审核" ? true : false;
              if(item.category == "repair"){
                item.cansend = item.stateStr == "待发货" ? true : false;
                item.title = "维修信息";
                item.bottomMsg = "你的维修申请已通过，请将您要维修的商品邮寄到商家指定收获地点。";
              }else if(item.category == "exchange"){
                item.cansend = item.stateStr == "待换货" ? true : false;
                item.title = "换货信息";
                item.bottomMsg = "你的换货申请已通过，请将您要换货的商品邮寄到商家指定收获地点。";
              }else {
                item.cansend = item.stateStr == "待退货" ? true : false;
                item.title = "退货信息";
                item.bottomMsg = "你的退货申请已通过，请将您要退货的商品邮寄到商家指定收获地点。";
              }
          });
          this.lst = this.lst.concat(tempData);
        }else {
          this.hasMore = false;
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
          this.$refs.afterSale.forceUpdate();
        }
      })
    },
    goConfirmPage: function(i){
      if(i){
        localStorage.serviceOrder = JSON.stringify(i);
      }
      this.$router.push({name: "confirmService"})
    },
    goProcess: function(item){
      localStorage.processList = JSON.stringify(item);
      this.$router.push({name: "progress"});
    },
    cancelRequest: function(i){
      let param = {};
      param.serviceOrderId = i.serviceOrderId;
      goCancelRequest(i.serviceOrderId,param).then( data => {
        if(data.code != 200){
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
        }else {
          i.canCancel = false;
          i.stateStr = "用户撤销服务单";
          i.stateDesc = "该服订单已关闭,用户主动撤回"
        }
      })
    }
  },
  mounted: function(){
    this.serviceList();
  },
}
</script>
<style lang="scss" scoped>
.outer {
  height: 100%;
  width: 100%;
  position: absolute;
}

</style>